<template>
	<view>
		<view class="join-wrap">
			<view class="title">报名信息填写</view>
			<view class="tips">请填写报名信息，将有工作人员联系您</view>
			<view class="line-box">
				<view class="tit">姓名</view>
				<input type="text" v-model="name" placeholder="请填写您的姓名"/>
			</view>
			<view class="line-box">
				<view class="tit">联系电话</view>
				<input type="text" v-model="mobile" placeholder="请填写您的手机号"/>
			</view>
			
			<view class="join-btn" @click="join">提交申请</view>
		</view>
		
		<view class="list">
			<view class="activity" v-for="(item,index) in list" :key="index">
				<view class="u-rela" @click="jump('/pages/college/active-detail?id='+item.id)">
					<image :src="item.cover"></image>
					<view class="type">{{item.apply ? '已申请' : '未申请'}}</view>
					<view class="u-flex info">
						<view class="u-flex-1">
							<view class="title u-line-2">{{item.title}}</view>
							<view class="remark u-line-2">{{item.des}}</view>
						</view>
						<view class="sebtn" @click.stop="activity_id = item.id" :class="{active:activity_id == item.id}">选择</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				mobile:'',
				activity_id:'',
				list:[],
				value:''
			}
		},
		methods: {
			join(){
				if(!this.list.length){
					this.$u.toast('当前暂无活动')
					return
				}
				const activity_id = this.activity_id
				if(!activity_id){
					this.$u.toast('请选择要参加的活动')
					return
				}
				uni.showModal({
					content:'是否提交申请',
					success: (res) => {
						res.confirm && this.$u.api.activityApply({
							activity_id,
							realname:this.name,
							phone:this.mobile,
						}).then(res=>{
							this.$u.toast('提交成功')
							this.getList()
							this.name = ''
							this.mobile = ''
						})
					}
				})
			},
			getList(){
				this.$u.api.activity({
					state:1,
					page:this.page,
					limit:999
				}).then(data=>{
					let res = data.data
					this.list = res
				})
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.join-wrap{margin: 50rpx 40rpx 0;box-shadow: 0rpx 0rpx 20rpx rgba($color: #000000, $alpha: 0.16);background-color: #fff;border-radius: 24rpx;padding: 0 60rpx 60rpx;
		.title{text-align: center;font-weight: bold;font-size: 36rpx;line-height: 120rpx;}
		.tips{color: #666;font-size: 26rpx;text-align: center;}
		.line-box{border-bottom: 1rpx solid #ddd;
			.tit{font-weight: bold;font-size: 42rpx;padding-top: 40rpx;color: #222;}
			input{width: 100%;height: 100rpx;line-height: 100rpx;}
		}
		.join-btn{line-height: 88rpx;background-color: $tc;color: #fff;text-align: center;font-size: 30rpx;border-radius: 100rpx;font-weight: bold;margin-top: 60rpx;}
	}
	.list{
		padding-top: 50rpx;
		.activity{
			padding: 0 40rpx;margin-top: 20rpx;
			.type{position: absolute;left: 0;background-color: rgba($color: #000, $alpha: .4);border-radius: 0 50rpx 50rpx 0;padding: 4rpx 20rpx 4rpx 14rpx;color: #fff;top: 20rpx;}
			image{border-radius: 20rpx;display: block;width: 100%;height: 260rpx;}
			.title{font-size: 32rpx;font-weight: bold;margin-top: 40rpx;}
			.remark{word-break: break-word;text-align: justify;margin-top: 20rpx;}
			&:first-child{margin-top: 0;}
			.info{
				.sebtn{border-radius: 100rpx;width: 160rpx;text-align: center;line-height: 66rpx;border: 2rpx solid $tc;color: $tc;font-weight: bold;}
				.active{background-color: $tc;color: #fff;}
			}
		}
	}
</style>
